<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div><h3>欢迎登录，{{ getLoginName() }}</h3></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div>
          <h3>快捷导航</h3>
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1" @click="toView('petList')">宠物列表</el-menu-item>
            <el-menu-item index="2" @click="toView('userList')">用户列表</el-menu-item>
            <el-menu-item index="3" @click="toView('userLogLogin')">登录日志列表</el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <h3>待处理申请</h3>
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item index="3" @click="toView('petAdopt')">
              宠物领养申请
              <el-badge :value="adoptNum" class="item">
              </el-badge>
            </el-menu-item>
            <el-menu-item index="4" @click="toView('ApplyList')">志愿者申请
              <el-badge :value="num" class="item">
              </el-badge>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="adoptLine" ref="adoptLineChart" :style="{ height: '500px', width: '700px' }"></div>
      </el-col>
      <el-col :span="12">
        <div id="petLine" ref="petLineChart" :style="{ height: '500px', width: '700px' }"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: "Welcome",
  data() {
    return {
      adoptNum: 0,
      num: 0,
      weekList: []
    }
  },
  methods: {
    getLoginName() {
      let userInfo = JSON.parse(sessionStorage.getItem("managerInfo"));

      return userInfo.username+'('+userInfo.name+')';
    },
    toView(str) {
      location.href = 'http://127.0.0.1:20002/' + str;
    },
    //获取真正志愿者申请的数量
    initApplyNum() {
      let url = "/apply/applyNum";
      this.$axios.get(url, {}).then(res => {
        if (res.data.code == 200) {
          this.num = res.data.data;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    //获取真正申请的数量
    initAdoptNum() {
      let url = "/petAdopt/petAdoptNum";
      this.$axios.get(url, {}).then(res => {
        if (res.data.code == 200) {
          this.adoptNum = res.data.data;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    //获取进一周的日期
    getDataArea() {
      //设置日期，当前日期的前七天
      var myDate = new Date(); //获取今天日期
      myDate.setDate(myDate.getDate() - 6);
      var dateArray = [];
      var dateTemp;
      var flag = 1;
      for (var i = 0; i < 7; i++) {
        dateTemp = myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();
        dateArray.push(dateTemp);
        myDate.setDate(myDate.getDate() + flag);
      }
      return dateArray;
    },
    // getDataArea() {
    //   var currentDate = new Date();
    //   var timesStamp = currentDate.getTime();
    //   var currenDay = currentDate.getDay();
    //   var dates = [];
    //   for (var i = 7; i > 0; i--) {
    //     dates.push(
    //         new Date(timesStamp - 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7))
    //             .toLocaleDateString().replace(/\//g, '-')
    //     );
    //   }
    //   return dates;
    // },
  },
  created() {
    this.initApplyNum();
    this.initAdoptNum();
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    let myChart1 = echarts.init(document.getElementById('adoptLine'))
    // 绘制图表
    myChart1.setOption({
      title: {
        text: '近一周宠物领养申请量',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      xAxis: {
        type: 'category',
        data: this.getDataArea()
      },
      yAxis: {
        type: 'value'
      },
      series: []
    });
    this.$axios.get("/petAdopt/weekNum", {}).then(res => {
      if (res.data.code == 200) {
        let list = res.data.data;
        let week = this.getDataArea();
        let datas = [];
        for (let i = 0; i < week.length; i++) {
          for (let j = 0; j < list.length; j++) {
            if (Date.parse(week[i]) == Date.parse(list[j].time)) {
              datas.push(list[j].num);
            }
          }
          if (datas[i] == null) {
            datas.push(0);
          }
        }
        myChart1.setOption({
          series: [{
            data: datas,
            type: 'line'
          }]
        })
      }
    });
    // 基于准备好的dom，初始化echarts实例
    let myChart2 = echarts.init(document.getElementById('petLine'));
    // 绘制图表
    myChart2.setOption({
      title: {
        text: '待领养宠物浏览量前十排行榜'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {},
      series: []
    });

    this.$axios.get("/pet/getViews", {}).then(res => {
      if (res.data.code == 200) {
        let list = res.data.data;
        console.log(list.length);
        let y = [];
        let x = [];

        for (let i = 0; i < list.length; i++) {
          console.log(list[i]);
          x.push(list[i].name);
          y.push(list[i].views);
        }
        myChart2.setOption({
          yAxis: {
            type: 'category',
            data: x
          },
          series: [
            {
              type: 'bar',
              data: y
            }
          ]
        })
      }
    });
  },
}
</script>

<style scoped>

</style>